import React, { Component } from "react";
import SCheduler from "../components/SCheduler";
import Dialog from "../components/Dialog";

export default class Page3 extends Component {
  constructor() {
    super();
    this.state = {
      list: [],
      tip: "",
      visible: false,
      date:"",
    };
  }
  componentDidMount() {
    this.setState({
      list: [
        { date: "2023-04-04", info: "晚上有会议" },
        { date: "2023-05-01", info: "五一放假出去玩" },
      ],
    });
  }
  getSchedulerInfo = (info) => {
    if (info.info) {
      this.setState({
        tip: info.info,
      });
    } else {
      this.setState({
        tip: "",
        date:info.date.formate("yyyy-mm-dd"),
        visible: true,
      });
    }
  };
  confirm = () => {
    //alert(this.refs.msg.value);
    //放到列表中
    this.setState({
        visible:false,
        list:[...this.state.list,{date:this.state.date,info:this.refs.msg.value}]
    },()=>{
        this.refs.msg.value = "";
    })

  };
  cancel = () => {
    this.setState({
      visible: false,
    });
  };

  render() {
    console.log("父组件", this.state.list);

    let content = (
      <div>
        <input  ref="msg" />
      </div>
    );
    return (
      <div>
        <div>{this.state.tip}</div>
        {/* visible,tip,confirm,cancel,content */}
        <Dialog
          visible={this.state.visible}
          tip="新增行程安排"
          content={content}
          confirm={this.confirm}
          cancel={this.cancel}
        ></Dialog>
        <div>
          <h3>日程安排</h3>
          <SCheduler
            list={this.state.list}
            onGetSchedulerInfo={this.getSchedulerInfo}
          ></SCheduler>
        </div>
      </div>
    );
  }
}
